<template>
    <div>
        <breadcrumb></breadcrumb>
        <div class="main">
            <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
                <el-tab-pane label="自营货源方" name="first">
                    <div class="main_item">
                        <selfCargoOwner></selfCargoOwner>
                    </div>

                </el-tab-pane>
               <!--  <el-tab-pane label="线路管理" name="second">
                    <div class="main_item">
                        <routeManagement></routeManagement>
                    </div>
                </el-tab-pane> -->
                <!-- <el-tab-pane label="自营服务费" name="third">
                    <div class="main_item">
                        <selfServiceFee></selfServiceFee>
                    </div>
                </el-tab-pane> -->
            </el-tabs>
        </div>
    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";
import selfCargoOwner from "./childen/selfCargoOwner.vue";
import selfServiceFee from "./childen/selfServiceFee.vue";
import routeManagement from "./childen/routeManagement.vue";
import httpApi from "@/http";
export default {
    data() {
        return {
            activeName: "first",
        };
    },
    methods: {
        handleClick(tab, event) {
        }
    },
    mounted() {

    },

    components: {
        breadcrumb,
        selfCargoOwner,
        selfServiceFee,
        routeManagement,

    },
};
</script>
  
<style lang="scss" scoped>
.main {
    .mainTabs {
        ::v-deep .el-tabs__nav {
            margin-left: 38px;
        }

        ::v-deep .el-tabs__nav-scroll {
            background-color: #fff;
        }

        // 标签页切换按钮
        ::v-deep .el-tabs__item {
            height: 50px;
            width: 88px;
            text-align: center;
            padding: 0;
            line-height: 50px;
            font-size: 12px;
            font-weight: bold;
            color: #939393;
        }

        // 下边框
        ::v-deep .el-tabs__nav-wrap::after {
            height: 1px;
            background-color: #F0F0F0;
        }

        // 标签页切换按钮 激活样式
        ::v-deep .el-tabs__item.is-active {
            background-color: #ECF5FE;
            color: #1890FF;
        }

        .main_item {
            padding: 0;
            background-color: #fff;
        }
    }

}</style>
  